import * as echarts from 'echarts'

const BarLine2Option = ({
  dataList,
  xdata,
  ColorArr,
  lineIcon,
  legend,
  grid,
  barWidth,
}) => {
  // 普通的柱状折线图
  const { lineColor, barColor } = ColorArr
  let options = {
    // color: ['#31C3E3', lineColor],
    tooltip: {
      show: true,
      trigger: 'axis',
      confine: 'true',
    },
    legend: legend
      ? {
          selectedMode: false,
          x: 'center',
          bottom: '-2%',
          itemWidth: 14,
          itemHeight: 12,
          // itemGap: 28,
          align: 'left',
          data: [
            {
              name: legend[0],
              textStyle: {
                fontSize: 12,
                color: '#666666',
              },
            },
            {
              name: legend[1],
              textStyle: {
                fontSize: 12,
                color: '#666666',
              },
            },
          ],
        }
      : { show: false },
    grid: grid
      ? grid
      : {
          top: 40,
          left: 40,
          right: 40,
          bottom: 45,
        },
    xAxis: [
      {
        type: 'category',
        data: xdata,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.12)',
          },
        },
        axisPointer: {
          type: 'shadow',
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#a0b4ba',
        },
        splitArea: {
          show: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#a0b4ba',
          },
        },
        axisLabel: {
          color: '#a0b4ba',
          formatter: '{value}',
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#D4D6E1',
            type: 'dashed',
          },
        },
        splitNumber: 3, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
      },
      {
        type: 'value',
        axisLine: {
          show: false,
          lineStyle: {
            color: '#a0b4ba',
          },
        },
        axisLabel: {
          color: '#a0b4ba',
          formatter: '{value}',
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#D4D6E1',
            type: 'dashed',
          },
        },
        splitNumber: 3, // 坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
      },
    ],
    series: [
      {
        name: dataList[0].name,
        type: 'bar',
        barWidth: barWidth,
        // barGap: '11',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: barColor[0] },
            { offset: 1, color: barColor[1] },
          ]),
          borderRadius: [5, 5, 0, 0],
        },
        data: dataList[0].value,
      },
      {
        name: dataList[1] ? dataList[1].name : '',
        type: 'line',
        yAxisIndex: 1,
        lineStyle: {
          color: lineColor,
          width: 2,
        },
        data: dataList[1] ? dataList[1].value : [],
        symbol: lineIcon,
        symbolSize: 10,
        itemStyle: {
          // 设置symbol的颜色
          normal: {
            color: lineColor,
          },
        },
      },
    ],
  }
  return options
}

export { BarLine2Option }
